<template>
  <div class="register-container">
    <!-- 顶部简约装饰 -->
    <div class="top-decoration"></div>
    
    <!-- 主注册区域 -->
    <div class="register-content">
      <div class="register-header">
        <h1>注册账号</h1>
        <p>开启您的专属体验</p>
      </div>
      
      <van-form @submit="handleSubmit">
        <van-cell-group :border="false">
          <!-- 手机号输入 -->
          <van-field
            v-model="form.phone"
            left-icon="phone-o"
            placeholder="手机号"
            :rules="rules.phone"
            class="clean-field"
          />
          
          <!-- 密码输入 -->
          <van-field
            v-model="form.password"
            left-icon="lock"
            type="password"
            placeholder="设置密码"
            :rules="rules.password"
            class="clean-field"
          />
          
          <!-- 验证码输入 -->
          <van-field
            v-model="form.captcha"
            left-icon="comment-o"
            placeholder="验证码"
            :rules="rules.captcha"
            class="clean-field"
          >
            <template #button>
              <van-button 
                size="small" 
                plain 
                type="primary"
                :disabled="isCountingDown"
                @click="sendCaptcha"
                class="captcha-btn"
              >
                {{ countdownText }}
              </van-button>
            </template>
          </van-field>
        </van-cell-group>
        
        <!-- 注册按钮 -->
        <van-button 
          block 
          type="primary" 
          native-type="submit"
          :loading="loading"
          class="submit-btn"
        >
          注册
        </van-button>
        
        <!-- 用户协议 -->
        <div class="agreement">
          <van-checkbox v-model="agreed" icon-size="16px">
            我已阅读并同意<span class="link-text" @click="showAgreement">《用户协议》</span>和<span class="link-text" @click="showPrivacy">《隐私政策》</span>
          </van-checkbox>
        </div>
      </van-form>
      
      <!-- 登录链接 -->
      <div class="login-prompt">
        已有账号？<span class="link-text" @click="goToLogin">立即登录</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import 'vant/lib/index.css';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';

const router = useRouter();
const loading = ref(false);
const agreed = ref(false);
const isCountingDown = ref(false);
const countdown = ref(0);

const form = ref({
  phone: '',
  password: '',
  captcha: ''
});

// 验证码倒计时
const countdownText = computed(() => {
  return isCountingDown.value? `${countdown.value}s后重试` : '获取验证码';
});

// 表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { pattern: /^.{6,20}$/, message: '密码需6-20位' }
  ],
  captcha: [
    { required: true, message: '请输入验证码' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字' }
  ]
};

// 发送验证码
const sendCaptcha = () => {
  if (!form.value.phone) {
    showToast('请输入手机号');
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
    showToast('手机号格式不正确');
    return;
  }
  
  isCountingDown.value = true;
  countdown.value = 60;
  
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      isCountingDown.value = false;
    }
  }, 1000);
  
  showToast('验证码已发送');
};

// 提交注册
const handleSubmit = () => {
  if (!agreed.value) {
    showToast('请先同意用户协议');
    return;
  }
  
  loading.value = true;
  
  setTimeout(() => {
    loading.value = false;
    showToast('注册成功');
    router.push('/home');
  }, 1500);
};

// 查看协议
const showAgreement = () => {
  showConfirmDialog({
    title: '用户协议',
    message: '请仔细阅读用户协议内容',
    confirmButtonText: '同意'
  });
};

// 查看隐私政策
const showPrivacy = () => {
  showConfirmDialog({
    title: '隐私政策',
    message: '请仔细阅读隐私政策内容',
    confirmButtonText: '同意'
  });
};

// 跳转登录
const goToLogin = () => {
  router.push('/login');
};
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-decoration {
  height: 120px;
  background-color: #1989fa;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 20px 20px;
  z-index: -1;
}

.register-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  width: 100%;
  max-width: 400px;
}

.register-header {
  text-align: center;
  margin-bottom: 32px;
}

.register-header h1 {
  font-size: 22px;
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
}

.register-header p {
  font-size: 14px;
  color: #969799;
}

.clean-field {
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebedf0;
}

:deep(.van-field__left-icon) {
  margin-right: 8px;
  color: #969799;
}

.submit-btn {
  margin-top: 32px;
  height: 44px;
  border-radius: 6px;
  font-size: 16px;
  background-color: #1989fa;
  border: none;
}

.captcha-btn {
  border-radius: 4px;
  font-size: 12px;
}

.agreement {
  margin-top: 20px;
  font-size: 12px;
  color: #969799;
  text-align: center;
}

.link-text {
  color: #1989fa;
  cursor: pointer;
}

.login-prompt {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #969799;
}

/* 动画效果 */
.clean-field {
  transition: border-color 0.3s ease;
}

.clean-field:focus-within {
  border-bottom-color: #1989fa;
}

/* 响应式调整 */
@media (max-width: 768px) {
 .register-content {
    max-width: 100%;
  }
}
</style>